<template>
  <div style="max-width: 500px;">
    <!-- 题目描述 -->
    <el-row>
      <!-- 题号&题型 -->
      <el-col>
        {{ index }}.
        <span style="color: #A8A8B3;">&nbsp;({{ '问答题' }})</span>
        <!-- 题目操作栏 -->
        <span style="margin-left: 20px;">
          <el-link :underline="false" @click="openEditMode">
            <i class="el-icon-edit" />
          </el-link>
          <el-link :underline="false" :disabled="id===-1" style="margin-left: 5px;" @click="deleteQues">
            <i class="el-icon-delete" />
          </el-link>
        </span>
      </el-col>
      <!-- 题目内容 -->
      <el-col v-if="!editMode" style="line-height: 200%;font-family: 宋体;"> {{ title }}</el-col>
      <el-col v-else>
        <el-form :inline="true">
          <el-input v-model="formData.title" type="textarea" />
        </el-form>
      </el-col>
    </el-row>
    <!-- 取消/确认按钮 -->
    <el-row v-if="editMode" style="margin-top: 10px;">
      <el-col>
        <el-button @click="closeEditMode">取消</el-button>
        <el-button type="primary" @click="submitForm">{{ id===-1? '添加': '修改' }}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { addQuestion, editQuestion, deleteQuestion } from '@/api/ms/course/teach/homework'

export default {
  name: 'AnswerQuestionEdit',
  props: {
    index: { type: Number, required: true }, // 题号
    id: { type: Number, required: true }, // 题目业务编号
    hwId: { type: Number, required: true }, // 题目所属作业编号
    title: { type: String, required: true }, // 题目名称
    deleteCallback: { type: Function, required: false, default: () => {} }, // 题目删除callback
    createCallback: { type: Function, required: false, default: () => {} } // 题目添加callback
  },
  data() {
    return {
      //   id: 111,
      //   index: 1,
      //   type: 0,
      //   title: 'aaa',
      editMode: false,
      formData: {
        title: ''
      }
    }
  },
  watch: {
    id(val) {
      this.editMode = false
    }
  },
  methods: {
    // 打开题目编辑模式
    openEditMode() {
      this.formData.title = this.title
      this.editMode = true
    },
    // 关闭(取消)题目编辑模式
    closeEditMode() {
      this.editMode = false
      // 恢复数据
      this.formData.title = this.title
    },
    // 提交修改结果
    submitForm() {
      const reqData = {
        type: 2,
        id: this.id !== -1 ? this.id : null,
        title: this.formData.title
      }

      if (reqData.id) {
        editQuestion(reqData).then(({ message }) => {
          this.$message.success(message)
          this.title = this.formData.title
          this.closeEditMode()
        }).catch(() => {
          this.closeEditMode()
        })
      } else {
        // 添加作业编号参数
        reqData.homeworkId = this.hwId
        addQuestion(reqData).then(({ message }) => {
          this.$message.success(message)
          this.title = this.formData.title
          this.closeEditMode()
          this.createCallback()
        }).catch(() => {
          this.closeEditMode()
        })
      }
    },
    // 删除题目
    deleteQues() {
      this.$confirm('确认删除题目？', '删除确认').then(() => {
        const reqData = {
          id: this.id,
          type: 2
        }
        deleteQuestion(reqData).then(({ message }) => {
          this.$message.success(message)
          this.deleteCallback()
        })
      }).catch(() => {

      })
    }
  }
}
</script>

  <style>

  </style>

